<template>
    <div class="table">
        <table border="1" rules="all" >
            <tr>
                <th v-for="(item,index) in titledata" :key="index">{{item}}</th>
            </tr>
            <!-- 第二行 -->
            <!-- <tr  v-for="(item,index) in listsdata" :key="index">
                <td>{{ item.id }}</td>
                <td>{{ item.reference }}</td>
                <td>{{ item.clients }}</td>
                <td>{{ item.receipt }}</td>
                <td>{{ item.unit }}</td>
                <td>{{ item.typenum }}</td>
                <td>{{ item.arrivedata }}</td>
                <td>{{ item.note }}</td>
                <td>{{ item.speed }}</td>
                <td>{{ item.founder }}</td>
                <td>{{ item.createdata }}</td>
                <td>{{ item.status }}</td>
                <td>{{ item.operate }}</td>
            </tr> -->
        </table>
    </div>
</template>

<script>
export default {
    data(){
        return {
            titledata: ['ID','任务编号','委托方','入库类型','供货单位/退货单位','应收货产品种类','预计到货日期','备注','任务进度','创建人','创建日期','任务状态','操作'],
            listsdata:[]
        }
    },
    mounted(){
        // fetch('http://localhost:3000/').then(res => res.json()).then(res1 => {
        //     console.log(res1)
        //     this.listsdata = res1.data
        // })
    }
}
</script>

<style>
.table {
    background-color: #fff;
    margin-top: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 20px;
    width: 1600px;
}
tr {
    white-space: nowrap;
    font-size: 12px;
}
th {
    font-size: 12px;
    color: #333;
    font-weight: normal;
    height: 45px;
    padding: 0 20px ;
    border: 1px solid #e9e9e9;
    width: calc(1600px / 6);
}
td {
    height: 45px;
    white-space: nowrap;
    padding:2px 2px 2px 15px;
    border: 1px solid #e9e9e9;
}
</style>